<template>
  <div class="publication-del-con">
    <div class="tab">
      <div class="tab-item" :class="[currentTab == '1' ? 'active' : '']" @click="handleTabClick('1')">纯文本描述</div>
      <div class="tab-item" :class="[currentTab == '2' ? 'active' : '']" @click="handleTabClick('2')">富文本描述</div>
    </div>

    <div class="mt10" v-if="currentTab == '1'">
      <a-textarea v-model="publish.plainTxtDescription" placeholder="请输入" allow-clear />
    </div>
    <div class="mt10" v-else>
      <editor v-model="publish.richTxtDescription" />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, toRefs, reactive } from 'vue'
  import editor from '@/components/wangeditor/editor.vue'
  export default defineComponent({
    components: { editor },
    setup() {
      const data: any = reactive({
        currentTab: '1',
        publish: {
          plainTxtDescription: '',
          richTxtDescription: '',
        },
      })
      const handleTabClick = (i: string) => {
        data.currentTab = i
      }

      const init = (info: any) => {
        data.currentTab = '1'
        data.publish = info?.publish || {
          plainTxtDescription: '',
          richTxtDescription: '',
        }
      }

      return {
        ...(toRefs(data) as any),
        handleTabClick,
        init,
      }
    },
  })
</script>

<style lang="less" scoped>
  .publication-del-con {
    margin: 10px 0;
    .tab {
      display: flex;
      .tab-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 80px;
        border: 1px solid #d7d7d7;
        cursor: pointer;
      }
      .active {
        border-color: #5181f2;
        color: #5181f2;
      }
    }
  }
</style>
